@import './var.css';
@import './FormCreate/index.scss';
@import 'element-plus/theme-chalk/dark/css-vars.css';

html {
  --el-menu-hover-bg-color: #ffffff !important;
}

html.dark {
}

.table {
  display: block;
}

.v-content-wrap {
  --el-card-border-radius: 4px !important;
  background: var(--wrapper-content-bg-color) !important;
  border: 1px solid var(--menu-border-color) !important;
}

.v-layout-content-scrollbar {
  height: 88vh !important;
}

/** 导航菜单相关样式 start */
.light {
  //#app {
  //  background: #ffffff;
  //  padding: 10px;
  //}
  //.v-layout {
  //  border-radius: 15px;
  //  border: 1px solid rgba(176, 220, 255, 1);
  //}
  .layout-top-parent-el-menu {
    background-color: rgba(0, 0, 0, 0) !important;
  }

  .layout-top-parent-el-menu .el-menu-item.is-active {
    background-color: rgba(0, 0, 0, 0) !important;
    //border-bottom: none !important;
  }

  .layout-top-parent-el-menu .el-menu-item:hover {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .layout-top-child-el-menu {
    padding-top: 14px;
  }

  .layout-top-child-el-menu .el-menu-item {
    border-radius: 30px;
  }

  .layout-top-child-el-menu .oneShowingOnlyChild.is-active {
    border: none !important;
    background: var(--el-color-primary) !important;
  }

  .layout-top-child-el-menu.el-menu--collapse .el-menu-item {
    padding: 0 0 0 6px !important;
  }

  .layout-top-child-el-menu.el-menu--collapse .el-sub-menu.is-active .el-sub-menu__title {
    border-radius: 30px !important;
  }

  .layout-top-child-el-menu.el-menu--collapse .el-sub-menu__title {
    padding: 0 0 0 6px !important;
  }

  .layout-left-el-menu {
    padding-top: 14px;
  }

  .layout-left-el-menu.el-menu--collapse .el-menu-item {
    padding: 0 0 0 6px !important;
  }

  .layout-left-el-menu.el-menu--collapse .el-sub-menu.is-active .el-sub-menu__title {
    border-radius: 30px !important;
  }

  .layout-left-el-menu.el-menu--collapse .el-sub-menu__title {
    padding: 0 0 0 6px !important;
  }

  .layout-left-el-menu .oneShowingChild.is-active {
    border: none !important;
    background: var(--el-color-primary) !important;
  }

  .layout-top-parent-el-menu {
    display: flex;
    align-items: center;
  }

  .topParentItem {
    margin-top: 20px;
    height: 32px !important;
    line-height: 32px !important;
    border-bottom: 0 !important;
  }

  .topParentItem.el-menu-item.is-active {
    border-radius: 16px !important;
    .v-menu__title {
      height: 30px !important;
      line-height: 30px !important;
    }
  }

  .left-menu-border {
    // border-top-right-radius: 30px;
    // border-bottom-left-radius: 15px;
    border-top: 1px solid rgba(176, 220, 255, 1);
    border-right: 1px solid rgba(176, 220, 255, 1);
  }

  .left-menu-bg {
    background: #ffffff;
  }

  .el-menu .oneShowingChild.is-active:last-child {
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
  }

  .el-menu .oneShowingChild.is-active {
    color: #ffffff !important;
  }

  .el-menu .oneShowingOnlyChild.is-active {
    color: #ffffff !important;
  }

  .el-menu--collapse .el-menu-item.is-active {
    color: #ffffff !important;
  }

  .el-menu-item:hover {
    background: #ffffff;
    color: #000000;
  }

  .el-menu-item.is-active {
    background: var(--el-color-primary);
    color: #000000;
  }

  .el-sub-menu.is-opened {
    color: #000000;
  }

  .el-popper .el-sub-menu__title {
    background: #ffffff !important;
    color: #000000;
  }

  .el-popper .el-menu .oneShowingChild.is-active:last-child {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .el-menu--collapse .el-sub-menu.is-active .el-sub-menu__title {
    --left-menu-text-active-color: #ffffff !important;
  }
}

.dark {
  //#app {
  //  background: #000000;
  //  padding: 10px;
  //}
  //.v-layout {
  //  border-radius: 15px;
  //  border: 1px solid #636466;
  //}
  .layout-top-parent-el-menu {
    background-color: rgba(0, 0, 0, 0) !important;
  }

  .layout-top-parent-el-menu .el-menu-item.is-active {
    background-color: rgba(0, 0, 0, 0) !important;
    //border-bottom: none !important;
  }

  .layout-top-child-el-menu {
    padding-top: 14px;
  }

  .layout-top-child-el-menu .el-menu-item {
    border-radius: 30px;
  }

  .layout-top-child-el-menu .oneShowingOnlyChild.is-active {
    border: none !important;
    background: var(--el-color-primary) !important;
  }

  .layout-top-child-el-menu.el-menu--collapse .el-menu-item {
    padding: 0 0 0 6px !important;
  }

  .layout-top-child-el-menu.el-menu--collapse .el-sub-menu.is-active .el-sub-menu__title {
    border-radius: 30px !important;
  }

  .layout-top-child-el-menu.el-menu--collapse .el-sub-menu__title {
    padding: 0 0 0 6px !important;
  }

  .layout-top-child-el-menu .el-menu-item.is-active {
    color: #ffffff !important;
  }

  .layout-left-el-menu {
    padding-top: 14px;
  }

  .layout-left-el-menu.el-menu--collapse .el-menu-item {
    padding: 0 0 0 6px !important;
  }

  .layout-left-el-menu.el-menu--collapse .el-sub-menu.is-active .el-sub-menu__title {
    border-radius: 30px !important;
  }

  .layout-left-el-menu.el-menu--collapse .el-sub-menu__title {
    padding: 0 0 0 6px !important;
  }

  .layout-left-el-menu .oneShowingChild.is-active {
    border: none !important;
    background: var(--el-color-primary) !important;
  }

  .layout-top-parent-el-menu {
    display: flex;
    align-items: center;
  }

  .topParentItem {
    margin-top: 20px;
    color: #ffffff !important;
    height: 32px !important;
    line-height: 32px !important;
    border-bottom: 0 !important;
  }

  .topParentItem.el-menu-item.is-active.is-active {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    color: #000000 !important;
    .v-menu__title {
      height: 30px !important;
      line-height: 30px !important;
      color: #000000 !important;
    }
  }

  .left-menu-border {
    border-top-right-radius: 30px;
    border-bottom-left-radius: 15px;
    border-top: 1px solid #636466;
    border-right: 1px solid #636466;
  }

  .left-menu-bg {
    background: #000000;
  }

  .el-menu .oneShowingChild.is-active:last-child {
    border-bottom-left-radius: 26px !important;
    border-bottom-right-radius: 26px !important;
  }

  .el-menu--collapse .el-menu-item.is-active {
    color: #ffffff !important;
  }

  .el-menu-item:hover {
    background: #ffffff;
    color: #000000;
  }

  .el-menu-item.is-active {
    background: var(--el-color-primary);
    color: #000000;
  }

  .el-sub-menu.is-opened {
    color: #000000;
  }

  .el-popper .el-sub-menu__title {
    //background: #ffffff !important;
    color: var(--left-menu-text-color);
  }

  .el-popper .el-menu .oneShowingChild.is-active:last-child {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .el-menu--collapse .el-sub-menu.is-active .el-sub-menu__title {
    --left-menu-text-active-color: #ffffff !important;
  }
}
/** 导航菜单相关样式 end */

/** element-ui-plus相关样式 start */
.dark {
  .el-message-box {
    background: linear-gradient(180deg, #4e555a 0%, #353c42 100%);
    border-image: linear-gradient(180deg, rgba(101, 112, 116, 1), rgba(0, 0, 0, 1)) 1 1;
    border-radius: 20px;
  }

  .el-dialog {
    --el-dialog-bg-color: linear-gradient(180deg, #4e555a 0%, #353c42 100%) !important;
    --el-dialog-border-radius: 26px;
  }

  .el-icon {
    --el-color-info: rgba(255, 255, 255, 0.75) !important;
  }

  .el-popper {
    background: var(--el-popper-bg-color);
    color: var(--el-popper-text-color);
  }
}
.light {
  .el-message-box {
    background: #ffffff;
    border-radius: 20px;
  }

  .el-dialog {
    --el-dialog-bg-color: #ffffff !important;
    --el-dialog-border-radius: 26px;
  }

  .el-popper {
    background: var(--el-popper-bg-color);
    color: var(--el-popper-text-color);
  }
}
/** 表格相关样式 start */
// 设置header圆角
// .el-table__header-wrapper {
//   background: var(--table-header-bg-color) !important;
//   border-radius: 12px;

//   table {
//     border-spacing: 0 !important;
//   }

//   .el-table__cell {
//     padding: 8px 0 !important;
//     height: 42px;
//   }
// }

// //设置每行左侧变圆
// .el-table td:first-child {
//   border-radius: 8px 0 0 8px;
//   padding: 0;
//   z-index: 999;
// }

// .el-table table{
//   border-spacing: 0 10px;
// }

// //设置每行右侧变圆
// .el-table td:last-child {
//   border-radius: 0 8px 8px 0;
//   z-index: 999;
//   padding: 0;
// }

// .el-table__row {
//   background: var(--table-tr-bg-color) !important;
//   border-image: linear-gradient(180deg, rgba(245, 245, 245, 1), rgba(203, 203, 203, 1)) 1 1;
//   border: 1px solid !important;
//   height: 42px;
// }

// .dark .el-table__row {
//   background: var(--table-tr-bg-color) !important;
//   border-image: linear-gradient(180deg, rgba(101, 112, 116, 1), rgba(0, 0, 0, 1)) 1 1;
//   border: 1px solid !important;
//   height: 42px;
// }

// .el-table--default .el-table__cell {
//   padding: 0;
// }

// .el-table__header tr {
//   background-color: rgba(0, 0, 0, 0) !important;
// }

// .el-table__header th {
//   background-color: rgba(0, 0, 0, 0) !important;
//   color: #333333 !important;
// }
/** 表格相关样式 end */

/* nprogress 适配 element-plus 的主题色 */
#nprogress {
  & .bar {
    background-color: var(--el-color-primary) !important;
  }

  & .peg {
    box-shadow:
      0 0 10px var(--el-color-primary),
      0 0 5px var(--el-color-primary) !important;
  }

  & .spinner-icon {
    border-top-color: var(--el-color-primary);
    border-left-color: var(--el-color-primary);
  }
}

.reset-margin [class*='el-icon'] + span {
  margin-left: 2px !important;
}

// 解决抽屉弹出时，body宽度变化的问题
.el-popup-parent--hidden {
  width: 100% !important;
}

// 解决表格内容超过表格总宽度后，横向滚动条前端顶不到表格边缘的问题
.el-scrollbar {
  overflow: initial;
}
.el-scrollbar__bar {
  display: flex;
  justify-content: flex-start;
}
/** element-ui-plus相关样式 end */
